<!-- =======================================================
  * Author: Jéssica Yang
  ======================================================== -->

<template>
  <div class="container">

    <!-- ======= El-Header 顶栏容器 ======= -->
    <el-header id="header" class="fixed-top">
      <div class="header d-flex align-items-center">
        <h1>Medical Pro</h1>
        <!-- ======= navbar ======= -->
        <nav class="navbar">
          <ul>
            <router-link to="/Home" class="home">Home</router-link>
          </ul>
        </nav>
        <!-- navbar -->
      </div>
    </el-header>
    <!-- End El-Header -->

    <div class="forms-container">
      <!--登录块-->
      <div class="signin-signup">

          <!--账号密码登录表单-->
          <el-form class="sign-in-form" :rules="loginRules" :model="loginForm" ref="loginForm">
            <h2 class="title">账号密码登录</h2>
            <!--用户名输入框-->
            <el-form-item class="input-field" prop="username">
              <el-input v-model="loginForm.username" placeholder="用户名" prefix-icon="el-icon-user" class="input"></el-input>
            </el-form-item>
            <!--密码输入框-->
            <el-form-item class="input-field" prop="password">
              <el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="el-icon-lock" class="input"></el-input>
            </el-form-item>
            <!--选择身份单选框-->
            <el-form-item>
              <p align="center">请选择登录身份</p>
              <el-form-item>
                <el-radio-group v-model="loginForm.role">
                  <el-radio :label="1">管理员登录</el-radio>
                  <el-radio :label="0">普通用户登录</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form-item>
            <!--登录按钮-->
            <el-form-item style="text-align: center">
              <el-button type="primary" @click="login">登 录</el-button>
              <div class="social-media"></div>
              <el-button type="text" size="medium"  autocomplete="off" @click="handlePass">忘记密码</el-button>
            </el-form-item>
          </el-form>

          <!--邮箱验证登录表单-->
          <el-form class="sign-up-form" :rules="mailRules" :model="loginFormEmail" ref="loginFormEmail">
            <h2 class="title">邮箱验证登录</h2>
            <!--用户名输入框-->
            <el-form-item class="input-field" prop="email">
              <el-input v-model="loginFormEmail.email" placeholder="邮箱名" prefix-icon="el-icon-message" class="input"></el-input>
            </el-form-item>
            <!--密码输入框-->
            <el-form-item class="input-field" prop="code">
              <el-input v-model="loginFormEmail.code" placeholder="验证码" prefix-icon="el-icon-lock" class="codeInput"></el-input>
              <el-button type="text" @click="getEmailCode(1)" class="getCode">获取验证码</el-button>
            </el-form-item>
            <!--选择身份单选框-->
            <el-form-item>
              <p align="center">请选择登录身份</p>
              <el-form-item>
                <el-radio-group v-model="loginFormEmail.role">
                  <el-radio :label="1">管理员登录</el-radio>
                  <el-radio :label="0">普通用户登录</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form-item>
            <!--登录按钮-->
            <el-form-item style="text-align: center">
              <el-button type="primary" @click="loginMail">登 录</el-button>
              <div class="social-media"></div>
              <el-button type="text" size="medium"  autocomplete="off" @click="handlePass">忘记密码</el-button>
            </el-form-item>
          </el-form>
      </div>

    </div>
    <div class="panels-container">
      <div class="panel left-panel">
        <div class="content">
          <p>使用邮箱验证码来登录此系统</p>
          <!--点击按钮切换当前页面-->
          <el-button class="btn transparent" @click="click1">邮箱验证码登录</el-button>
        </div>
        <img src="../assets/log.svg" class="image" alt="" />
      </div>
      <div class="panel right-panel">
        <div class="content">
          <p>使用账号密码来登录此系统</p>
          <!--点击按钮切换当前页面-->
          <el-button class="btn transparent" @click="click2">账号密码登录</el-button>
        </div>
        <img src="../assets/register.svg" class="image" alt="" />
      </div>
    </div>

    <el-dialog title="忘记密码" :visible.sync="dialogFormVisible" width="30%" style="text-align: left">
      <el-form label-width="60px" size="small" style="text-align: center">
        <el-form-item label="邮箱">
          <el-input size="medium" style="width: 200px" v-model="pass.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" :inline="true">
          <el-input size="medium" style="width: 200px" v-model="pass.code"></el-input>
        </el-form-item>
        <el-button size="mini" @click="getEmailCode(2)">获取验证码</el-button>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="mini" @click="passwordBack">重置密码</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  name: "Login",
  data(){
    return{
      loginForm: {role: 0},
      loginFormEmail: {role: 0},
      pass:{},
      dialogFormVisible:false,
      //表单验证规则
      loginRules:{
        username:[   //用户名验证限制
          {required: true, message:"请输入帐号", trigger:'blur'},
          {min:1, max: 20, message: '长度为1-20个字符', trigger: 'blur' }
        ],
        password:[   //密码验证限制
          {required: true, message:"请输入密码", trigger:'blur'},
          {min:1, max: 20, message: '长度为1-20个字符', trigger: 'blur' }
        ],
      },
      mailRules:{
        email:[
          {required: true, message:"请输入邮箱账号", trigger:'blur'},
        ],
        code:[
          {required: true, message:"请输入验证码", trigger:'blur'},
          {min:1, max: 4, message: '长度为4个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{

    click1(){   //查询button
      this.loginForm= { }
      this.loginForm.role = 0
      const container = document.querySelector(".container");
      container.classList.add("sign-up-mode");
    },
    click2(){   //登录button
      this.loginFormEmail= { }
      this.loginFormEmail.role = 0
      const container = document.querySelector(".container");
      container.classList.remove("sign-up-mode");
    },

    //请求获取验证码
    getEmailCode(type){
      let email;
      if (type === 1) {
        email = this.loginFormEmail.email
      } else if(type === 2) {
        email = this.pass.email
      }
      if(!email){
        this.$message.warning("请输入邮箱")
        return
      }
      if (!/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(email)){
        this.$message.warning("请输入正确格式的邮箱！")
        return
      }
      //发送邮箱验证码
      this.request.get("/user/email/" + email +"/"+ type).then(res=>{
        if (res.data.code === '200')
          this.$message.success("发送成功")
        else {
          this.$message.error(res.data.msg)
        }
      })
    },

    handlePass() {
      this.dialogFormVisible = true
      this.pass = {}
    },

    passwordBack() {
      this.request.put("/user/reset", this.pass).then(res => {
        if (res.data.code === '200') {
          this.$message.success("重置密码成功，新密码为：123456，请尽快修改密码")
          this.dialogFormVisible = false
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },

    //账号密码登录功能
    login(){
      this.$refs['loginForm'].validate((valid) =>{
        if(valid){  //表单校验合法
          this.request.post('/user/login', this.loginForm).then(
              response => {
                console.log(response.data);
                if(response.data.code === '200'){
                  if(response.data !== null){
                    localStorage.setItem('access-admin', JSON.stringify(response.data.data))
                    this.$store.commit('getRole', response.data.data.role)
                    this.$store.commit('getId', response.data.data.id)
                    this.$store.commit('getName', response.data.data.nickname)
                    this.$store.commit("getAvatar",response.data.data.avatar)
                    this.$router.replace({path:'/mainpage/clock'})
                  }
                  console.log(response);
                  this.$message.success("登录成功")
                }
                else
                  this.$message.error(response.data.msg)
              },
              error => {
                this.$message.error("登录失败，链接出问题啦")
              }
          )
        }
      })
    },

    //邮箱验证登录功能
    loginMail(){
      this.$refs['loginFormEmail'].validate((valid) =>{
        if(valid){  //表单校验合法
          this.request.post('/user/loginEmail', this.loginFormEmail).then(
              response => {
                console.log(response.data);
                if(response.data.code === '200'){
                  if(response.data !== null){
                    localStorage.setItem('access-admin', JSON.stringify(response.data.data))
                    this.$store.commit('getRole', response.data.data.role)
                    this.$store.commit('getId', response.data.data.id)
                    this.$store.commit('getName', response.data.data.nickname)
                    this.$router.replace({path:'/mainpage'})
                  }
                  console.log(response);
                  this.$message.success("登录成功")
                }
                else
                  this.$message.error(response.data.msg)
              },
              error => {
                this.$message.error("登录失败，链接出问题啦")
              }
          )
        }
      })
    }

  }
}
</script>

<style src="../assets/login.css" scoped>

</style>